<template>
    <view class="n-component-nBar cu-bar bg-white" :class="[is_solid_bottom?'solid-bottom':'', bar_tb?'padding-tb-'+bar_tb:'']"
        :style="bar_tb?'height: auto; min-height: auto;':''">
        <view class="action">
            <text :class="[title_icon?title_icon:'cuIcon-titles']" class="text-nddyny"></text>
            <view class="align-center">
                <text :class="[class_title?class_title:'text-xl text-bold']">{{title}}</text>
                <text v-if="title_desc" class="margin-left-20" :class="[class_title_desc?class_title_desc:'text-15']">{{title_desc}}</text>
            </view>
            <text v-if="subtitle" class="text-lg text-gray margin-left-10">{{subtitle}}</text>
        </view>
        <view v-if="right_uri || right_tap || right_title" class="action text-gray" :class="class_right_title" @tap="_right_tap">
            <text>{{right_title}}</text>
            <text v-if="right_uri || right_tap" class="cuIcon-right"></text>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['title', 'title_icon', 'right_title', 'right_uri', 'right_tap', 'subtitle', 'is_solid_bottom', 'bar_tb', 'title_desc',
            'class_title', 'class_title_desc', 'class_right_title'
        ],
        data() {
            return {}
        },
        methods: {
            _right_tap() {
                if (this.right_tap) {
                    this.right_tap();
                }
                if (this.right_uri) {
                    this.$store.commit('userNavTo', this.right_uri);
                }
            }
        }
    }
</script>
